<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 100px;
            top: 100px;
            text-align: center;
            line-height: 200px;

        }
    </style>
</head>

<body>
    <!-- <div class="box" onclick="alert(111)"></div> -->
    <button class="clear">清除</button>
    <div class="box"></div>
</body>
<script>
    // JS绑定事件的方法:
    // (1) 内联JS绑定事件   => 了解(代码写在标签中 可读性差,不利于代码复用,维护成本高)
    // (2) DOM一级事件    ele.onclick = function(){}  => 一个元素只能绑定一个相同类型的事件
    // box.onclick = null;  清除事件
    // (3) 事件监听(DOM二级事件)  => 可以给一个元素绑定多个相同类型的事件
    // 添加事件监听 
    // ele.addEventListener(eventType,callback,bool)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型
    // callback   事件触发时执行的回调函数
    // bool       ...

    // 删除事件监听 
    // ele.removeEventListener(eventType,callback,bool)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型
    // callback   事件触发时执行的回调函数
    // bool       ...

    // 注意: 清除事件对应回调函数清除


    var box = document.getElementsByClassName("box")[0];
    var clear = document.getElementsByClassName("clear")[0];

    // console.dir(box);
    // box.onclick = function () {
    //     alert(1111);
    // }
    // box.onclick = function () {
    //     alert(2222);
    // }

    // 需求
    // 点击box 弹出111  随机背景颜色 随机数字  => 清除事件中的某一项不好清除

    // box.onclick = function () {
    //     alert(11111);
    //     this.style.backgroundColor = randColor();
    //     this.textContent = Math.round(Math.random() * 100);
    // }

    // box.onclick = null;


    // 添加事件监听
    box.addEventListener("click", function () {
        alert(1111);
    })

    // 事件监听中 回调函数的this仍然指向绑定事件的元素 (IE低版本有问题 window)
    box.addEventListener("click", function () {
        this.style.backgroundColor = randColor();
    })

    box.addEventListener("click", function () {
        this.textContent = Math.round(Math.random() * 100);
    })


    clear.onclick = function () {
        box.removeEventListener("click", function () {
            alert(1111);
        })

        // 事件监听中 回调函数的this仍然指向绑定事件的元素 (IE低版本有问题 window)
        box.removeEventListener("click", function () {
            this.style.backgroundColor = randColor();
        })

        box.removeEventListener("click", function () {
            this.textContent = Math.round(Math.random() * 100);
        })

    }






















    // 颜色表示方式
    // 1. 颜色单词  red green blue
    // 2. 16进制   #ffffff   16(0 1 2 3 4 5 6 7 8 9 a b c d e f)
    // 3. ragb     rgba(255,255,255,1);
    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#"
        for (var i = 0; i < 6; i++) {
            // var index = Math.round(Math.random() * (str.length - 1));
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }


</script>

</html>